<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局组件</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 如果需要使用组件,则在vue渲染区使用
					规则:
						在vue中使用标签时默认都是小写字母
						如果需要引入驼峰规则  则使用 - 代替
			 -->
			<add-Num></add-Num>
		</div>
		<!-- 定义模板标签的语法 必须有根标签  如<div></div> -->
		<template id="numTem">
			<div>
				<h1>这是一个组件</h1>
				获取数值:{{num}}
			</div>
		</template>
		<script>
		/**
		 * 参数:
		 * 		1.组件名称
		 * 		2.组件实体内容  对象
		 */
			Vue.component("addNum",{
				//属性
				data(){
					return{
						//自定义属性
						num : 100
					}
				},
				//页面标记  template模板
				template: "#numTem"
				//方法
			})
			/**
			 * 实例化vue对象
			 * 找到区域交给vue渲染
			 */
			const app = new Vue({
				el : "#app"
			})
		</script>
	</body>
</html>
